<template>
  <div>
    <hd-scroll-bar v-model="isSelected">
      <hd-scroll-bar-item link="0">选项1</hd-scroll-bar-item>
      <hd-scroll-bar-item link="1">项目2</hd-scroll-bar-item>
      <hd-scroll-bar-item link="2">项目3</hd-scroll-bar-item>
      <hd-scroll-bar-item link="3">项目4</hd-scroll-bar-item>
    </hd-scroll-bar>
    <hd-scroll-panel v-model="isSelected" @change="onChange">
      <hd-scroll-panel-item :link="index" v-for="(item, index) in 4" :key="index">
        <div>标签{{index+1}}</div>
        <div v-for="(item, index) in 3" :key="index+1">
          <div>
            <img src="http://img.jgzyw.com:8000/d/img/tpmx/2013/04/02/21/20130402212552716.jpg" width="100%">
          </div>
        </div>
      </hd-scroll-panel-item>
    </hd-scroll-panel>
    <div>
      <yd-slider autoplay="3000">
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </yd-slider-item>
        <yd-slider-item>
            <a href="http://www.ydcss.com">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
            </a>
        </yd-slider-item>
      </yd-slider>
    </div>
    <div>
      <yd-rollnotice autoplay="2000">
        <yd-rollnotice-item><span style="color:#F00;"> 荐 </span>荣耀V9 3月超级钜惠！</yd-rollnotice-item>
        <yd-rollnotice-item><span style="color:#F00;"> 荐 </span>3.23京东超级品牌日格力盛典</yd-rollnotice-item>
        <yd-rollnotice-item><span style="color:#F00;"> 荐 </span>京东服饰 早春新品低至7折</yd-rollnotice-item>
      </yd-rollnotice>
    </div>
    <div class="yd-tab tabkk">
      <ul class="yd-tab-nav" style="color:rgb(255, 94, 83);" v-show="navList.length > 0">
        <li class="yd-tab-nav-item"
            v-for="(item, key) in navList"
            :key="key"
            :class="item._uid == activeIndex ? 'yd-tab-active' : ''"
            @click="changeHandler(item._uid, item.label, item.tabkey)">
            <a href="javascript:;">{{item.label}}</a>
        </li>
      </ul>
    </div>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content" id="content">
        <li v-for="(item, index) in 4" :key="index+10" :ref="'li'+index">
          <div>标签{{index+1}}</div>
          <div v-for="(item, index) in 3" :key="index+1">
            <div>
              <img src="http://img.jgzyw.com:8000/d/img/tpmx/2013/04/02/21/20130402212552716.jpg" width="100%">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
// 示例2
.tabkk
  position sticky
  top 0
</style>

<script>
/**
 * 慧鼎组件-滚动导航头部,配合hdScrollPanel使用
 * 使用方法
 * <hd-scroll-bar v-model="isSelected">
      <hd-scroll-bar-item link="0">选项1</hd-scroll-bar-item>
      <hd-scroll-bar-item link="1">项目2</hd-scroll-bar-item>
      <hd-scroll-bar-item link="2">项目3</hd-scroll-bar-item>
      <hd-scroll-bar-item link="3">项目4</hd-scroll-bar-item>
    </hd-scroll-bar>
    <hd-scroll-panel v-model="isSelected" @change="onChange">
      <hd-scroll-panel-item :link="index" v-for="(item, index) in 4" :key="index">
        <div>标签{{index+1}}</div>
        <div v-for="(item, index) in 3" :key="index+1">
          <div>
            <img src="http://img.jgzyw.com:8000/d/img/tpmx/2013/04/02/21/20130402212552716.jpg" width="100%">
          </div>
        </div>
      </hd-scroll-panel-item>
    </hd-scroll-panel>
 *
 * 1. hd-scroll-bar hd-scroll-panel 绑定 v-model, v-model格式为
      isSelected: {
        link: '0' // 导航与面板的绑定纽带
      }
 * 2. 设置 hd-scroll-bar-item hd-scroll-panel-item link 属性, 相同为一组
 * 3. 设置 启动方法 @change="onChange" 方法内容
 * onChange(val) {
      this.isSelected = val
    }
 */
export default {
  data() {
    return {
      // 示例2 激活索引
      activeIndex: 0,
      // 示例2
      navList: [
        {
          _uid: '0',
          label: '测试1',
          tabkey: '1'
        },
        {
          _uid: '1',
          label: '测试2',
          tabkey: '2'
        },
        {
          _uid: '2',
          label: '测试3',
          tabkey: '3'
        },
        {
          _uid: '3',
          label: '测试4',
          tabkey: '4'
        }
      ],
      // 示例1 绑定对象
      isSelected: {
        link: '0' // 导航与面板的绑定纽带
      }
    }
  },
  mounted() {
    // 示例1 延时加载滚动事件
    this.$nextTick(() => {
      // 发生滚动时候进行执行 示例2 可以解除这里, 解除这里后hd-scroll-bar 将失效
      // window.onscroll = this.throttle(this.handleScroll, 20)
    })
  },
  methods: {
    // 示例1 启动滚动
    onChange(val) {
      this.isSelected = val
    },
    // 示例2
    handleScroll () {
      console.log('==============我被调用了======================');
      // 如果内容区域滚动溢出,开始执行计算导航,否则导航都是第一个
      if (this.$refs.wrapper.getBoundingClientRect().top < 0) {
        for (var index = 0; index < 4; index++) {
          if (this.$refs.wrapper.children[0].children[index].getBoundingClientRect().top - 55 < 0) {
            this.activeIndex = index
          }
        }
      } else {
        this.activeIndex = 0
      }
    },
    // 示例2
    changeHandler(uid, label, tabkey) {
      if (this.activeIndex !== uid) {
        this.activeIndex = uid
      }
      this.$scrollTo(this.$refs.wrapper.children[0].children[uid], 500, {offset: -45})
    },
    // 示例2
    /**
     * 函数节流方法
     * @param Function fn 延时调用函数
     * @param Number delay 延迟多长时间
     * @param Number atleast 至少多长时间触发一次
     * @return Function 延迟执行的方法
     */
    throttle (fn, delay, atleast) {
      var timer = null;
      var previous = null;
      return function () {
        var now = +new Date();
        if (!previous) previous = now;
        if (now - previous > atleast) {
          fn();
          // 重置上一次开始时间为本次结束时间
          previous = now;
        } else {
          clearTimeout(timer);
          timer = setTimeout(function() {
            fn();
          }, delay);
        }
      }
    }
  }
}
</script>
